import React, { Component, Fragment } from 'react'
import { CardWrap, ContentWrap } from './Style.js'
import { Card } from 'antd'
import HighTable1 from './component/HighTable1'
import HighTable2 from './component/HighTable2'
import HighTable3 from './component/HighTable3'
import HighTable4 from './component/HighTable4'
class HighTableComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'HighTableComponent',
    }
  }
  render() {
    return (
      <Fragment>
        <ContentWrap>
          <CardWrap>
            <Card title="高级表格知识基础点">
              <p>1.增加的备注需要description和expandable两个属性</p>
              <p>2.滚动需要使用scroll里面是一个对象x,y两个属性</p>
              <p>3.并列头部需要children属性</p>
              <p>4.总结框需要summary属性</p>
            </Card>
          </CardWrap>
          <CardWrap>
            <Card title="高级表格知识点表格增加备注">
              <HighTable1></HighTable1>
            </Card>
          </CardWrap>
          <CardWrap>
            <Card title="高级表格知识点表格固定表头列。我设置的宽度小于800固定,高度50固定">
              <HighTable2></HighTable2>
            </Card>
          </CardWrap>
          <CardWrap>
            <Card title="高级表格知识点表格有列头合并">
              <HighTable3></HighTable3>
            </Card>
          </CardWrap>
          <CardWrap>
            <Card title="高级表格知识点表格总结行">
              <HighTable4></HighTable4>
            </Card>
          </CardWrap>
        </ContentWrap>
      </Fragment>
    )
  }
}

export default HighTableComponent
